<!DOCTYPE html>

<head>
  <meta charset="UTF-8">
  <style>
    html,
    body,
    #map {
      height: 100%;
      width: 100%;
    }
  </style>
  <title>一个最简单的例子</title>
  <link rel="stylesheet" href="../library/ol/ol.css">
  <link rel="stylesheet" href="../css/common.css">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>

<body>
  <button id="start-animation">Start Animation</button>
  <div id="map" class="map"> </div>

  <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script
    src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL">
  </script>
  <script src="../library/ol/ol-debug.js"></script>
  <script src="./js/common.js"></script>
  <script type="text/javascript">
    var layer = new ol.layer.Vector({
      source: new ol.source.Vector(),
      // 注意：把feature上的style，直接移到layer上，避免直接在feature上设置style
      style: new ol.style.Style({
        image: new ol.style.Circle({
          radius: 10,
          fill: new ol.style.Fill({
            color: 'red'
          })
        })
      })
    });
    var map = new ol.Map({
      layers: [
        new ol.layer.Tile({
          source: new ol.source.OSM()
        }),
        layer
      ],
      target: 'map',
      view: new ol.View({
        center: ol.proj.transform(
          [104, 30], 'EPSG:4326', 'EPSG:3857'),
        zoom: 10
      })
    });

    // 在地图上添加一个圆
    var circle = new ol.Feature({
      geometry: new ol.geom.Point(ol.proj.transform(
        [104, 30], 'EPSG:4326', 'EPSG:3857'))
    })
    // 此处不再为feature设置style
    layer.getSource().addFeature(circle);

    // 添加一个用于选择Feature的交互方式
    map.addInteraction(new ol.interaction.Select({
      // 设置选中后的style
      style: new ol.style.Style({
        image: new ol.style.Circle({
          radius: 10,
          fill: new ol.style.Fill({
            color: 'blue'
          })
        })
      })
    }));
  </script>
</body>